<template>
	<view class="pages">
		<view class="settings">

			<view class="settingsItems" v-for="(t,index) in ScoreboardTypeData" :key="index"
				:class="[ libarytypeindex == index ? 'settingsItemszhong' : '']" @click="settingsItems(t,index)">
				{{t.text}}
			</view>
		</view>


		<view class="selectBox">
			<view class="selectBoxItems" @click="yearShow = true">
				<image src="../../static/date.png" mode="" style="width: 40rpx;height: 40rpx;margin-right: 15rpx;">
				</image>
				<view class="tips">

					{{year ? year : $t('SelectYear')}}
				</view>
				<!-- 		<image src="../../static/xiala.png" mode="" style="width: 30rpx;height: 30rpx;"> </image> -->
				<view class="icon">
					<u-icon name="arrow-down" v-if="yearShow == false"></u-icon>
					<u-icon name="arrow-up" v-else></u-icon>
				</view>
			</view>

			<view class="selectBoxItems" @click="monthShow = true">
				<image src="../../static/date.png" mode="" style="width: 40rpx;height: 40rpx;margin-right: 15rpx;">
				</image>
				<view class="tips">

					{{month ? month : $t('SelectMonth')}}
				</view>
				<!-- <image src="../../static/xiala.png" mode="" style="width: 30rpx;height: 30rpx;"> </image> -->
				<view class="icon">
					<u-icon name="arrow-down" v-if="monthShow == false"></u-icon>
					<u-icon name="arrow-up" v-else></u-icon>
				</view>
			</view>
		</view>
		<view class="items" v-for="(items,index) in dadaList">
			<view class="itemsLeft">
				<!-- <image src="../../static/user.png" mode="" style="width: 100%;height: 100%;"> -->
				<image :src="pingURL(items.avatar)" mode="" style="width: 100%;height: 100%;border-radius: 50%;"
					@click.stop="$imgShow(pingURL(items.avatar))">
					<view class="RX" v-if="index <= 4" :style="{color:`${paiHangSyle(index)}`}">
						{{index + 1}}
					</view>
			</view>
			<view class="itemsCenter">
				<view class="itemsCenterT">
					<!-- Jennifer Wong -->
					{{items.realName || ''}}
				</view>
				<view class="hc">
					<view class="itemsCenterB">
						<!-- ED -->
						{{ libarytypeindex == 0 ?  items.levelName : items.level || ''}}
					</view>
					<view class="itemsRight">
						<!-- $161,000 -->
						${{libarytypeindex == 0 ?  $formatNumberWithCommas(items.inforceTp):  $formatNumberWithCommas(items.active_tp)|| '0.00'}}
					</view>

				</view>
			</view>

		</view>
		<!-- 选年份器 -->
		<u-picker :show="yearShow" :minDate="-631152000000" :columns="yearcolumns" keyName="label"
			:confirmText="$t('Confirm')" :cancelText="$t('Cancel')" @cancel="yearShow = false"
			@confirm="yearConfirm"></u-picker>

		<!-- 选年月份 -->
		<u-picker :show="monthShow" :minDate="-631152000000" :columns="monthcolumns" keyName="label"
			:confirmText="$t('Confirm')" :cancelText="$t('Cancel')" @cancel="monthShow = false"
			@confirm="monthConfirm"></u-picker>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				allTotalSum: 0, //个人所有的业绩收入
				InforceTP: 0,
				PendingTP: 0,
				newUrl: 0, //0为新接口1为老接口
				status: 'loadmore',
				page: 0,
				userInfo: {
					...JSON.parse(uni.getStorageSync('user'))
				},
				libarytypeindex: 0,
				yearShow: false,
				monthShow: false,
				yearData: '',
				MonthData: '',
				year: '',
				month: '',
				dadaList: [],
				yearcolumns: [],
				monthcolumns: [],
				categoryIds: '',
				upOption: {
					noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认10,
				},
				top: "24rpx",
				pager: {
					currentPage: 1,
					maxResultCount: 10
				},
				ScoreboardTypeData: [{
					id: 2,
					text: "Baseshop TP"
				}, {
					id: 3,
					text: "Superbase TP"
				}, {
					id: 4,
					text: "Infinity TP"
				}],


			}
		},
		onReachBottom() {
			if (this.page >= 3) return;
			this.status = 'loading';
			this.page = ++this.page;
			setTimeout(() => {
				this.dadaList.length += 10;
				if (this.page >= 3) this.status = 'nomore';
				else this.status = 'loading';
			}, 2000)
		},
		created() {
			this.getYearDate()
			this.getMonthDate()
			// this.getYeJi()
		},
		methods: {
			// 获取个人业绩
			getYeJi() {
				uni.showLoading({
					title: this.$t('Laoding'),
				})
				this.$get(`/backend/index/tp-sdata`).then(res => {
					this.InforceTP = res.data.data.inforce_tp
					this.PendingTP = res.data.data.pending_tp
					this.allTotalSum = parseFloat((this.InforceTP + this.PendingTP).toFixed(2));
					if (this.allTotalSum && this.allTotalSum > 0) {
						this.ScoreboardTypeData.unshift({
							id: 1,
							text: "Personal TP"
						})
					} else {
						this.categoryIds = 2
					}
					this.getList()
					console.log(this.allTotalSum, '索取');

				})
			},
			paiHangSyle(val) {
				let color = ''
				if (val == 0) {
					color = '#db8731'
				} else if (val == 1) {
					color = '#959595'
				} else if (val == 2) {
					color = '#c46b4d'
				} else if (val == 3) {
					color = '#bf527b'
				} else if (val == 4) {
					color = '#73bc53'
				}
				return color
			},
			//  获取年数据
			getYearDate(e) {
				let date = new Date()
				let year = date.getFullYear()
				let dateList = []
				for (let i = 2022; i <= year; i++) {
					let ds = {
						label: `${i}`,
						id: i,
					}
					dateList.unshift(ds)
				}
				this.yearcolumns = [dateList]
			},
			//  获取月数据
			getMonthDate() {
				let dateList = []
				for (let i = 1; i <= 12; i++) {
					let ds = {
						label: `${i < 10 ? `0${i}` : i}`,
						id: `${i < 10 ? `0${i}` : i}`,
					}
					dateList.unshift(ds)
				}
				this.monthcolumns = [dateList]
			},
			// 选择年
			yearConfirm(e) {
				this.year = e.value[0].id
				this.yearShow = false
				this.getList()
			},
			// 选月
			monthConfirm(e) {
				this.month = e.value[0].id
				this.monthShow = false
				this.getList()
			},
			// 获取数据
			async getList() {
				uni.showLoading({
					title: this.$t('Laoding'),
				})
				const res = await this.$get(`/biz/app/getInforceTp`, {
					userId: '',
					cateId: this.categoryIds ? this.categoryIds : 1,
					year: this.year,
					month: this.month,
					token: uni.getStorageSync('token')
				}, this.newUrl)
				this.dadaList = res.data.data.slice(0, 25);
				// if (res.data.data.length >= 0) {
				// 	if (this.pager.currentPage == 1) {
				// 		this.dadaList = []
				// 	}
				// 	this.dadaList = this.dadaList.concat(res.data.data)
				// }
				// this.mescroll.endBySize(res.data.data.length, res.data.data.length)
			},

			// 切换分类
			settingsItems(t, index) {
				this.libarytypeindex = index
				this.categoryIds = t.id
				this.getList()
				console.log(t, index);
			},
			// 文字超出打点
			hotLength(val, len) {
				if (val.length > len) {
					return `${val.substring(0,len)}...`
				} else {
					return val
				}
			},
			// 拼头像路径
			pingURL(url) {
				let U = ''
				if (url.indexOf("https://api.myonewow.com/") !== -1) {
					U = this.$baseUrl + url.slice(24)
					return U
				} else {
					U = url
					if (url.indexOf("images/user/avatar") !== -1) {
						U = this.$baseUrl + `/${U}`
						return U
					} else {
						if (U) {
							U = this.$baseUrl + `/${U}`
							return U
						} else {
							U = `../../static/atu.png`
							return U
						}

					}
				}

			}
		}
	}
</script>

<style scoped>
	@font-face {
		font-family: 'YourMechanicalFont';
		src: url('@/static/DS-DIGIB.TTF') format('truetype');
	}

	.pages {
		width: 100%;
		height: 100vh;
		overflow-y: auto;
		background-color: #F0F0F0;
		padding: 0 30rpx 60rpx;
		box-sizing: border-box;

	}

	.settings {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		margin-top: 32rpx;
	}

	.settingsItems {
		width: 40%;
		height: 64rpx;
		background-color: #fff;
		line-height: 64rpx;
		font-family: Montserrat;
		font-size: 14px;
		font-weight: 700;
		letter-spacing: 0.20000000298023224px;
		text-align: center;
		color: #273562;
		/* margin-left: 20rpx; */
		padding: 0 20rpx;
		border-radius: 32rpx;
		margin-bottom: 20rpx;
	}

	.selectBox {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		width: 100%;
		height: 64rpx;
		margin-bottom: 20rpx;
	}

	.selectBoxItems {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 15rpx;
		box-sizing: border-box;
		width: 45%;
		height: 100%;
		background-color: #fff;
		border-radius: 16rpx;
	}

	.selectBoxItems:last-child {
		margin-left: 20rpx;
	}

	.tips {
		width: 250rpx;
		font-family: Montserrat;
		font-size: 28rpx;
		font-weight: 400;
		line-height: 10px;
		letter-spacing: 0.20000000298023224px;
		text-align: left;
		color: #808080;
	}

	.items {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		height: 168rpx;
		background-color: #fff;
		margin-bottom: 12rpx;
	}

	.itemsLeft {
		position: relative;
		width: 150rpx;
		height: 150rpx;
		margin: 0 40rpx 0 10rpx;
	}

	.itemsCenter {
		width: 482rpx;
	}

	.itemsCenterT {
		font-family: Montserrat;
		font-size: 32rpx;
		font-weight: 700;
		letter-spacing: 0.20000000298023224px;
		text-align: left;

	}

	.itemsCenterB {
		font-family: Montserrat;
		font-size: 28rpx;
		font-weight: 400;
		letter-spacing: 0.20000000298023224px;
		text-align: left;
	}

	.itemsRight {
		width: 100%;
		font-family: Montserrat;
		font-size: 32rpx;
		font-weight: 700;
		letter-spacing: 0.20000000298023224px;
		color: #EDB665;
		padding-right: 30rpx;
		box-sizing: border-box;
		text-align: right;
	}

	.RX {
		line-height: 56rpx;
		text-align: center;
		width: 56rpx;
		height: 56rpx;
		position: absolute;
		right: 5rpx;
		bottom: 5rpx;
		/* background-color: #fff; */
		background-color: #273562;
		border-radius: 50%;
		font-weight: 900;
		font-size: 40rpx;
		font-family: 'YourMechanicalFont', sans-serif;
	}

	.settingsItemszhong {
		background-color: #273562;
		color: #fff;
	}

	.hc {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10rpx;
	}
</style>